<template>
<div class="icons-container">
  <div
    class="icon"
    v-for="item of list"
    :key="item.id">
    <div class="icon-img">
      <img class="icon-img-content" :src="item.imgUrl" alt="">
    </div>
    <p class="icon-desc">{{item.desc}}</p>
  </div>
</div>
</template>

<script>
export default{
  name: 'HomeIcons',
  props: {
    list: Array
  }
  // data () {
  //   return {
  //     iconList: [
  //       {
  //         id: '0001',
  //         imgUrl: require('images/icon_1.png'),
  //         desc: '居家'
  //       }, {
  //         id: '0002',
  //         imgUrl: require('images/icon_2.png'),
  //         desc: '文具'
  //       }, {
  //         id: '0003',
  //         imgUrl: require('images/icon_3.png'),
  //         desc: '数码'
  //       }, {
  //         id: '0004',
  //         imgUrl: require('images/icon_4.png'),
  //         desc: '服饰'
  //       }
  //     ]
  //   }
  // }
}
</script>

<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  .icons-container
    overflow hidden
    height 0
    padding-bottom:20%
    margin .2rem 0
   .icons-container
      .icon
        position relative
        overflow hidden
        float left
        height 0
        width 25%
        padding-bottom:20%
        .icon-desc
          position absolute
          left: 0
          right: 0
          bottom 0
          height: .44rem
          line-height: .44rem
          color $firstFC
          text-align: center
          ellipsis()
        .icon-img
           position absolute
           top: 0
           left: 0
           right: 0
           bottom: .44rem
           box-sizing border-box
           padding .26rem
          .icon-img-content
            height 100%
            display block
            margin 0 auto
</style>
